<template>
  <div>

    <!-- 添加分类按钮 -->
    <el-button type="primary" @click="handleAdd" style="margin-bottom: 10px">添加分类</el-button>
     <div class="mt-4">
        <el-input
            v-model="searchQuery"
            style="max-width: 600px"
            placeholder="请按输入查询内容,父子联查为'父名称+子名称'"
            class="input-with-select"
        >
          <template #append>
            <el-button :icon="Search" @click="search"/>
          </template>
        </el-input>
        <el-button plain size="small" @click="clearSearch" style="margin-left: 10px">重置</el-button>
      </div>
    <!-- 分类列表表格 -->
    <el-table :data="categories" style="width: 100%">
      <el-table-column prop="categoryId" label="分类ID" width="80"></el-table-column>
      <el-table-column prop="categoryParentName" label="父分类名称" width="200"></el-table-column>
      <el-table-column prop="categoryChildName" label="子分类名称" width="200"></el-table-column>
      <el-table-column label="分类图片" width="150">
        <template #default="scope">
          <img :src="scope.row.categoryImg" alt="分类图片" style="width: 100px; height: auto" />
        </template>
      </el-table-column>
      <el-table-column label="规格信息" width="300">
        <template #default="scope">
          <div>
            <div>化学成分: {{ scope.row.standards.chemicalComposition }}</div>
            <div>描述: {{ scope.row.standards.content }}</div>
            <div>纯度: {{ scope.row.standards.purity }}</div>
            <div>性能: {{ scope.row.standards.performance }}</div>
            <div>容量: {{ scope.row.standards.capacity }}</div>
            <div>长度: {{ scope.row.standards.length }}</div>
            <div>直径: {{ scope.row.standards.diameter }}</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template #default="scope">
          <!-- 编辑按钮 -->
          <el-button type="primary" size="small" @click="handleEdit(scope.row)">编辑</el-button>
          <!-- 删除按钮 -->
          <el-button type="danger" size="small" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <el-pagination
      background
      layout="prev, pager, next"
      :page-size="pageSize"
      :total="totalCategories"
      @current-change="handlePageChange"
      style="margin-top: 10px"
    />

    <addCategoryDrawer
      :drawer-visible="isDrawerVisible"
      @update:drawerVisible="val => isDrawerVisible = val"
      @formSubmitted="fetchCategories"
    />
    <editCategoryDialog
      :category="selectedCategory"
      :drawer-visible="isEditDrawerVisible"
      @update:drawerVisible="val => isEditDrawerVisible = val"
      @formSubmitted="fetchCategories"
    />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import {ElButton, ElMessage, ElMessageBox} from 'element-plus';
import {getCategory, deleteCategories, getCategoryByName} from '@/api/category.js';
import addCategoryDrawer from '@/components/drawer/addCategoryDrawer.vue';
import editCategoryDialog from '@/components/dialog/editCategoryDialog.vue';
import {Search} from "@element-plus/icons-vue";
const categories = ref([]);
const currentPage = ref(1);
const pageSize = 2;
const totalCategories = ref(0);
const isDrawerVisible = ref(false);
const isEditDrawerVisible = ref(false);
const selectedCategory = ref(null);
const searchQuery = ref('')
const search = () => {
  if (searchQuery.value !== '') {
      getLikeName()
  } else {
    ElMessage.error('请输入查询内容')
  }
}
//模糊查条件
const getLikeName = async () => {
  if (searchQuery.value.includes('+')){
    const search= searchQuery.value.split('+')
     const response = await getCategoryByName(currentPage.value, pageSize, search[0],search[1])
    categories.value = response.list;
    totalCategories.value = response.totalNum;
  }else{
    const response = await getCategoryByName(currentPage.value, pageSize, searchQuery.value,null)
  categories.value = response.list;
  totalCategories.value = response.totalNum;
  }

}
const clearSearch = () => {
  searchQuery.value = '';
  fetchCategories();
}
// 获取分类数据
const fetchCategories = async () => {
  const response = await getCategory(currentPage.value, pageSize);
  categories.value = response.list;
  totalCategories.value = response.totalNum;
};

// 分页改变时触发
const handlePageChange = (page) => {
  currentPage.value = page;
  fetchCategories();
};

// 添加分类
const handleAdd = () => {
  isDrawerVisible.value = true;
};

// 编辑分类
const handleEdit = (category) => {
  selectedCategory.value = category;
  // console.log(selectedCategory.value)
  isEditDrawerVisible.value = true;
};

// 删除分类
const handleDelete = (category) => {
  console.log(category)
  ElMessageBox.confirm('确认删除该分类吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
      const categoryIds = [category.categoryId];
      await deleteCategories(categoryIds);
      fetchCategories();
      ElMessage.success('删除成功');
    })
    .catch(() => {});
};

onMounted(() => {
  fetchCategories();
});
</script>

<style scoped>
.el-button {
  margin-right: 10px;
}
</style>
